{% extends 'stage/base.html' %}

{% block title %}
    得到 - 低仿
{% endblock %}


{% block body %}
    <div class="container">
        <div>
            <h1>{{ course.courseName }}</h1>
            <small>{{ course.subhead }}</small>
            <p>{{ usr.loginame }} · {{ usr.remark }}</p>
            <p>0人加入学习</p>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                {{ course.coursePrice }}得到贝
            </button>
        </div>
        <hr>
        <!-- Content here -->
        <h2>课程亮点</h2>
        <p>{{ course.description|safe }}</p>
    <hr>
        <h2>课程大纲</h2>
        <div class="accordion" id="accordionExample">
            {% for outline in course.outline %}
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse"
                                    data-target="#collapse{{ outline.id }}"
                                    aria-expanded="true" aria-controls="collapse{{ outline.id }}">
                                {{ outline.outlineName }}
                            </button>
                        </h2>
                    </div>

                    <div id="collapse{{ outline.id }}" class="collapse show" aria-labelledby="headingOne"
                         data-parent="#accordionExample">
                        <div class="card-body">
                            <small>{{ outline.remark }}</small>
                            <hr>
                            {% for article in outline.article %}
                                <p>
                                    {{ article.title }}
                                </p>
                            {% endfor %}

                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    支付宝
                    微信
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确认购买</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}



